<!--
*@Author: QWP
*@Description: 在线编辑器
*@Date: 2024-09-11 16:37:43
-->
<template>
  <div style="width: 100%" 
    :style="{ 'height': `calc(100vh - ${ reduceH || 0 })` }"
    v-if="Object.keys(config).length != 0">
    <DocumentEditor 
      id="docEditor" 
      :documentServerUrl="editorApi"
      :config="config"
      :events_onDocumentReady="onDocumentReady"
      :onLoadComponentError="onLoadComponentError"
    /> 
  </div>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-doc-editor'
})
import { ref, reactive, computed, onMounted, watch } from 'vue' 
import { useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
import { editorApi } from '@/http/api.ts'
import * as fileApis from '@/service/file/index.ts'
import axios from 'axios';

const { token } = storeToRefs(useLoginStore())

const props = defineProps<{
  current: object,
  reduceH: string
}>()
console.log("🚀 ~ props:", props)

const emits = defineEmits(['change'])

const state = reactive({
  config: reactive({})
})
const config = ref({})

// 阿莎大萨达所大阿莎阿莎
const getData = async () => {
  try {
    const res = await fileApis.downloads12(props.current['onFileId'])
    let tRes = res;
    if(props.current['_type']) {
      tRes.type = props.current['_type']
    }
    tRes.document = {
      ...tRes.document,
      permissions: {
        ...tRes.document.permissions,
        edit: false
      },
    }
    tRes.editorConfig = {
      callbackUrl: tRes.editorConfig.callbackUrl,
      lang: "zh-CN",
      plugins: tRes.editorConfig.plugins,
      user: tRes.editorConfig.user,
      customization: {
        "logo": {
          "visible": false
        },
        autosave: false,
        "uiTheme": "theme-light",
      },
      mode:  props.current['status'] == 3 ? 'view' : 'edit',
    },
    tRes.events = {
      // 'onDocumentStateChange': onDocumentStateChange
    }
    config.value = tRes
    console.log("🚀 ~ getData ~ config.value:", config.value)
  } catch (error) {}
}

const onDocumentReady = () => {
}

const onLoadComponentError = (errorCode, errorDescription) => {
  switch(errorCode) {
    case -1: // Unknown error loading component
      break;

    case -2: // Error load DocsAPI from http://documentserver/
      break;

    case -3: // DocsAPI is not defined
      break;
  }
}

// 文件被修改回调
const onDocumentStateChange = (event) => {
  emits('change')
  if (event.data) {
  } else {
  }
}

watch(() => props.current, (nval, oval) => {
  if((nval || {})['onFileId']) {
    getData()
  }
}, { immediate: true, deep: true })

</script>

<style lang='scss' scoped>
</style>